<template>
  <div class="indexheader">
    <div class="indexsuo">
      <div class="indexhh">
        <div>大学生就业管理系统</div>
        <div>就业统计</div>
        <div>系统设置</div>
      </div>

      <div class="indexhf">
        <!-- 系统公告 -->
        <div class="indexhf1">
          <img src="../assets/imgs/gongao.png" alt="" />
          <span class="indexhf1_span">2</span>
          <div class="indexhf1_d">
            <div>
              <span></span>
              <span>所有通知</span>
              <span>9</span>
            </div>
            <div>
              <span></span>
              <span>系统通知</span>
              <span>4</span>
            </div>
            <div>
              <span></span>
              <span>前台通知</span>
              <span>5</span>
            </div>
            <div>
              <span>查看所有公告</span>
            </div>
          </div>
        </div>

        <!-- 消息通知 -->
        <div class="indexhf2">
          <img src="../assets/imgs/提醒.png" alt="" />
          <span class="indexhf2_span">3</span>
          <div class="indexhf2_d">
            <div>
              <span></span>
              <span>写什么订单</span>
              <span>21</span>
            </div>
            <div>
              <span></span>
              <span>写什么订单</span>
              <span>12</span>
            </div>
            <div>
              <span></span>
              <span>写什么订单</span>
              <span>12</span>
            </div>
          </div>
        </div>

        <!-- 个人 -->
        <div class="indexhf3">
          <div style="line-height: 60px" v-if="!loginuname">个人</div>
          <div v-else>欢迎：{{ loginuname }}</div>
          <div class="indexhf3_d">
            <p></p>
            <div>
              <span class="bianbian" @click="changeshow">个人信息</span>
              <span>切换账号</span>
              <span @click="tuichu">退出</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 固定定位 个人 -->
    <div v-if="bian" class="gddw">
      <div class="gddw_a bian">
        <p>个人信息 <b @click="changeshow1">x</b></p>
        <!-- 个人图标 -->
        <div class="gddw_tou">
          <img src="" alt="" />
          <div>
            <h6>fage</h6>
            <h6>什么页没有</h6>
          </div>
        </div>
        <!-- 修改个人详情 -->
        <div class="gddw_body">
          <div>
            <div>
              <b>*</b>
              用户名
            </div>
            <input type="text" />
          </div>
          <div>
            <div>
              <b>*</b>
              电话密码
            </div>
            <input type="text" />
          </div>
          <div>
            <div>
              <b>*</b>
              密码
            </div>
            <input type="text" />
          </div>
          <div>
            <div>
              <b>*</b>
              新密码
            </div>
            <input type="text" />
          </div>
        </div>
        <button>保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["loginuname"]),
  },
  data() {
    return {
      bian: false,
    };
  },
  mounted() {
    // bianbian gddw_a true
    document.addEventListener("click", (e) => {
      // console.log("e1111", e);
      // gddw 是一个全屏的隐形的点击事件
      if (e.target._prevClass == "gddw" && e.target._prevClass != "bianbian") {
        this.bian = false;
      }
    });
  },
  methods: {
    ...mapMutations(["login"]),
    // 退出登录
    tuichu() {
      this.login(null);
      this.$router.push("/");
    },
    changeshow1(e) {
      this.bian = false;
    },
    changeshow(e) {
      if (this.bian == true) {
        this.bian = false;
      } else if (this.bian == false) {
        this.bian = true;
      }
      // this.bian = !this.bian;
    },
  },
};
</script>

<style scoped src="../assets/css/indexheader.css">
</style>

<style>
</style>